import { UpdateHospitalType, getCityprovinceValue, getClassifyprovinceValue, getHospitalTypeValue, getHospitalValue, getprovinceValue } from '@/api/hospitalList/HospitalList'
import { ReqHospitallistList, ReqHospitallistiteam, ReqprovinceList } from '@/api/hospitalList/model/hospitalListType'
import { Button, Card, Checkbox, Form, Input, Select, Table, Tag, message } from 'antd'
import { useForm } from 'antd/lib/form/Form'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'

export default function HospitalSet() {
  // 使用navigate
  let navigate = useNavigate()
  // 获取From表单数据
  let [from] = useForm()
  let { Option } = Select
  // 存储总数
  let [total, setTotal] = useState<number>(50)
  let [current, setcurrent] = useState<number>(1)
  let [pageSize, setpageSize] = useState<number>(5)
  let [loading, setloading] = useState<boolean>(false)
  // 存储医院初始化数据
  let [hospital, sethoapital] = useState<ReqHospitallistList>([])
  // 存储省份数据
  let [province, setprovince] = useState<ReqprovinceList>([])
  // 存储市份数据
  let [city, setCity] = useState<ReqprovinceList>([])
  // 存储区份数据
  let [classify, setclassify] = useState<ReqprovinceList>([])
    // 存储数据
    let [hosapitalType, sethosapitalType] = useState<ReqprovinceList>([])

  // 初始化数据
  let getHospitallistValue = async (page = current, limit = pageSize) => {
    // 清空hospital数据
    sethoapital([])
  //  获取inpt框数据
  let obj = from.getFieldsValue()
    setcurrent(page)
    setpageSize(limit)
    setloading(true)
    let res = await getHospitalValue({ page, limit,...obj })
   
    
    setloading(false)
    sethoapital(res.content)
    setTotal(res.totalElements)

  }
  // 获取省份数据
  let getprovince = async () => {
    let res = await getprovinceValue()
    setprovince(res)
   
  }
  // 获取市数据
  let getCity = async (value: number) => {
    from.setFieldsValue({cityCode:undefined,districtCode:undefined})
    setCity([])
    let res = await getCityprovinceValue(value)
    setCity(res)
  }
  // 获取区数据
  let getclassify = async (value: number) => {
    from.setFieldsValue({districtCode:undefined})
    setclassify([])
    let res = await getClassifyprovinceValue(value)
    setclassify(res)
  }
  // 获取医院类型
  let getHospitalTypet = async ()=>{
  let res = await  getHospitalTypeValue(10000)
  sethosapitalType(res)
  }
  // 清空
  let reset = ()=>{
    setclassify([])
    setCity([])
    getHospitallistValue()
  }
  // 上下线操作
  let updateType = (id:string,status:number)=>{
    return async ()=>{
      status = status===1?0:1
   await UpdateHospitalType({id,status})
   getHospitallistValue()
   message.success("状态修改成功")

    }

  }
  // 模拟生命周期
  useEffect(() => {
    getHospitallistValue()
    getHospitalTypet()
    getprovince()

  }, [])

  // 表格列设置
  const columns: ColumnsType<any> = [
    {
      width: 100,
      align: 'center',
      title: '序号',
      render(key, value, index) {
        return index + 1
      }
    },
    {
      align: 'center',
      title: '医院logo',
      dataIndex: "logoData",
      render(text) {
        return <img style={{ width: 100 }} src={`data:image/jpeg;base64,${text}`} alt="" />
      }

    },
    {
      align: 'center',
      title: '医院名称',
      dataIndex: "hosname"
    },
    {
      width: 100,
      align: 'center',
      title: '等级',
      dataIndex: "param",
      render(text) {
        return text.hostypeString
      }
    },
    {
      align: 'center',
      title: '详细地址',
      dataIndex: "param",
      render(text) {
        return text.fullAddress

      }
    },
    {
      width: 100,
      align: 'center',
      title: '状态',
      dataIndex: "status",
      render(text) {
        return text ? <Tag color="red">已上线</Tag> : <Tag color="green">已下线</Tag>

      }
    },
    {
      align: 'center',
      title: '创建时间',
      dataIndex: "createTime"
    },
    {
      width: 250,
      align: 'center',
      fixed: "right",
      title: '操作',
      render(row:ReqHospitallistiteam) {
        return <span><Button type="primary" onClick={()=>{
          navigate(`/syt/hospital/hospitalset/show/${row.id}`)
        }}>查看</Button>
        {
          row.status===1? <Button type="primary" className='ml'onClick={updateType(row.id,row.status)} danger>下线</Button>: <Button  type="primary" className='ml'onClick={updateType(row.id,row.status)} >上线</Button>
        }
          <Button type="primary" className='ml' onClick={()=>{
            navigate(`/syt/hospital/hospitalset/scheduling/${row.hoscode}`)
            
          }}>排班</Button>
         
        </span>
      }
    }
  ]
  return (
    <Card>
      {/* Form表单 */}
      <Form
        layout="inline"
        onFinish={()=>{getHospitallistValue(1,5)}}
        form={from}
        onRateChange={reset}
      >
        <Form.Item
          name="provinceCode"
          style={{ width: 180 }}
        >
          <Select placeholder="请选择省份" onChange={getCity}>
            {
              province.map((Item) => {
                return <Option key={Item.id} value={Item.id}>{Item.name}</Option>

              })
            }
          </Select>
        </Form.Item>
        <Form.Item
          name="cityCode"
          style={{ width: 180 }}
        >
          <Select placeholder="请选择市" onChange={getclassify}>
            {
              city.map((Item) => {
                return <Option key={Item.id} value={Item.id}>{Item.name}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item
          name="districtCode"
          style={{ width: 180 }}
        >
          <Select placeholder="请选择区" >
            {
              classify.map((Item)=>{
                return <Option key={Item.id} value={Item.id}>{Item.name}</Option>
              })
            }
   
          </Select>
        </Form.Item>

        <Form.Item
          name="hosname"
        >
          <Input placeholder='医院名称' />
        </Form.Item>
        <Form.Item

          name="hoscode"

        >
          <Input placeholder='医院编号' />
        </Form.Item>
        <Form.Item
          name="hostype"
          style={{ width: 180 }}
        >
          <Select placeholder="请选择医院类型">
            {
              hosapitalType.map((Item)=>{
                return  <Option key={Item.id} value={Item.value}>{Item.name}</Option>

              })
            }
     
          </Select>
        </Form.Item>
        <Form.Item
          name="status"
          style={{ width: 180 }}
          className='mt'
        >
          <Select placeholder="请选择医院状态">
            <Option value={1}>已上线</Option>
            <Option value={0}>未上线</Option>
        
          </Select>
        </Form.Item>



        <Form.Item className='mt'>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button type="default" className='ml' htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>
      {/* 表格 */}
      <Table
        className='mt'
        bordered
        scroll={{ x: 1500 }}
        loading={loading}
        rowKey="id"
        pagination={{
          pageSizeOptions: [5, 10, 15, 20],  //  设置每页展示数据量
          showSizeChanger: true, //永远展示控制分页器
          showQuickJumper: true,
          total: total,
          current: current,
          pageSize: pageSize,
          showTotal(total: number) {
            return <span>总条数为：{total}</span>
          },
          onChange: getHospitallistValue

        }}

        columns={columns}
        dataSource={hospital}
      />;
    </Card>
  )
}
